import React from "react";
import Gif from "@/spinner/gif";
import PropTypes from "prop-types";
import styles from "@/spinner/index.less";

/**
 * 自定义活动指示器
 * @see https://github.com/JackPu/react-core-loading-spinner
 */
class AdvancedSpin extends React.Component {

  render() {
    const {width, height, text, show, type, color, display, children } = this.props;
    if (!show) {
      return <span />;
    }
    const styleObject = Object.assign({}, this.props.style);

    let loading = (
      <div className={styles.svgLoader} style={styleObject}>
        <svg width="1em" height="1em" >
          <circle style={{ stroke: color }} cx="0.5em" cy="0.5em" r="0.45em" />
        </svg>
      </div>
    );
    if (type === 'gif') {
      loading = <Gif width={width} height={height} />;
    } else if(type === 'custom') {
      loading = children;
    }
    // 返回行内的加载内容
    if (display === 'inline') {
      return loading;
    }
    return (
      <div className={styles.loadingSpinner} >
        <div className={styles.inner}>
          {loading}
          <div className={styles.alertText} hidden={!text}>{text}</div>
        </div>
      </div>
    );
  }
}

AdvancedSpin.propTypes = {
  type: PropTypes.string,
  color: PropTypes.string,
  style: PropTypes.object,
  text: PropTypes.string,
  show: PropTypes.bool,
  width: PropTypes.string,
  height: PropTypes.string,
  display: PropTypes.string,
};

AdvancedSpin.defaultProps = {
  type: 'gif',
  style: {},
  color: '#9b59b6',
  text: 'Loading',
  show: false,
  width: '68px',
  height: '55px',
  display: 'block',
};

export default AdvancedSpin;
